<template>
  <div class="main">
    <h2>数据记录</h2>
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['处理数', '报警数'],
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          data: (() => {
            const days = [];
            const date = new Date();
            for (let i = 6; i > 0; i--) {
              const day = new Date(date);
              day.setDate(date.getDate() - i);
              days.push(`${(day.getMonth() + 1).toString().padStart(2, '0')}-${day.getDate().toString().padStart(2, '0')}`);
            }
            return days;
          })(),
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '处理数',
            type: 'line',
            smooth: true,
            data: [300, 450, 600, 550, 700, 780, 680],
            itemStyle: {
              color: '#ffd700'
            }
          },
          {
            name: '报警数',
            type: 'bar',
            data: [280, 430, 560, 500, 680, 730, 640],
            itemStyle: {
              color: '#00f6ff'
            },
            barWidth: '40%'
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style scoped>
.main {
  height: 39vh;
  width: 37.5%;
  background-color: #0d2b55;
  position: absolute;
  right: 1%;
  top: 160vh;
  margin-top: 10px;
  z-index: 2;
}
.main h2 {
  color: #00f6ff;
  margin-left: 10px;
  text-align: center;
  margin-top: 15px;
}

.chart-container {
  height: calc(100% - 100px);
  width: 95%;
  margin: 0 auto;
}
</style>
